<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>通过四则运算的解释器快速理解编译原理（二十八） | 卡夫卡的岛上书店</title>
    <meta name="generator" content="VuePress 1.7.1">
    <link rel="icon" href="/blogs/blogs/favicon.ico">
    <meta name="description" content="卡夫卡的岛上书店是凯小默的个人博客，用于记录学习笔记、分享音乐、书籍、旅行等个人兴趣的站点。">
    <meta name="keywords" content="凯小默,凯小默的博客,博客,个人博客,vue,vuejs,vuepress,vuepress-theme-reco,卡夫卡,岛上书店,卡夫卡的岛上书店,音乐,电影,书籍">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    
    <link rel="preload" href="/blogs/assets/css/0.styles.6da96bf9.css" as="style"><link rel="preload" href="/blogs/assets/js/app.c4a9ac0d.js" as="script"><link rel="preload" href="/blogs/assets/js/2.a11320bc.js" as="script"><link rel="preload" href="/blogs/assets/js/233.9556cd61.js" as="script"><link rel="preload" href="/blogs/assets/js/6.b06f02ee.js" as="script"><link rel="prefetch" href="/blogs/assets/js/10.5d7eb8fd.js"><link rel="prefetch" href="/blogs/assets/js/100.58d50392.js"><link rel="prefetch" href="/blogs/assets/js/101.d3f91f4b.js"><link rel="prefetch" href="/blogs/assets/js/102.3e599175.js"><link rel="prefetch" href="/blogs/assets/js/103.ecbcba9d.js"><link rel="prefetch" href="/blogs/assets/js/104.b7112fb5.js"><link rel="prefetch" href="/blogs/assets/js/105.c26464ae.js"><link rel="prefetch" href="/blogs/assets/js/106.cafe382c.js"><link rel="prefetch" href="/blogs/assets/js/107.895a1efe.js"><link rel="prefetch" href="/blogs/assets/js/108.896c97cc.js"><link rel="prefetch" href="/blogs/assets/js/109.4e94f990.js"><link rel="prefetch" href="/blogs/assets/js/11.d5d2ab49.js"><link rel="prefetch" href="/blogs/assets/js/110.7d958736.js"><link rel="prefetch" href="/blogs/assets/js/111.efc15dc2.js"><link rel="prefetch" href="/blogs/assets/js/112.066210e5.js"><link rel="prefetch" href="/blogs/assets/js/113.351c51de.js"><link rel="prefetch" href="/blogs/assets/js/114.63ac2fda.js"><link rel="prefetch" href="/blogs/assets/js/115.fcbc525c.js"><link rel="prefetch" href="/blogs/assets/js/116.d91cc793.js"><link rel="prefetch" href="/blogs/assets/js/117.de85e622.js"><link rel="prefetch" href="/blogs/assets/js/118.a81f51fb.js"><link rel="prefetch" href="/blogs/assets/js/119.4bd195dd.js"><link rel="prefetch" href="/blogs/assets/js/12.625f8a5f.js"><link rel="prefetch" href="/blogs/assets/js/120.1fd285ff.js"><link rel="prefetch" href="/blogs/assets/js/121.fed4aa6f.js"><link rel="prefetch" href="/blogs/assets/js/122.4d79c2d1.js"><link rel="prefetch" href="/blogs/assets/js/123.fe541236.js"><link rel="prefetch" href="/blogs/assets/js/124.626d03de.js"><link rel="prefetch" href="/blogs/assets/js/125.4b1e9e09.js"><link rel="prefetch" href="/blogs/assets/js/126.84a3bf03.js"><link rel="prefetch" href="/blogs/assets/js/127.a9588eb7.js"><link rel="prefetch" href="/blogs/assets/js/128.77eee453.js"><link rel="prefetch" href="/blogs/assets/js/129.381ba64b.js"><link rel="prefetch" href="/blogs/assets/js/13.5971ebf1.js"><link rel="prefetch" href="/blogs/assets/js/130.4bc05626.js"><link rel="prefetch" href="/blogs/assets/js/131.ced68191.js"><link rel="prefetch" href="/blogs/assets/js/132.2a9833e3.js"><link rel="prefetch" href="/blogs/assets/js/133.da1e1df5.js"><link rel="prefetch" href="/blogs/assets/js/134.49218225.js"><link rel="prefetch" href="/blogs/assets/js/135.d228a910.js"><link rel="prefetch" href="/blogs/assets/js/136.d434a2a2.js"><link rel="prefetch" href="/blogs/assets/js/137.b0146900.js"><link rel="prefetch" href="/blogs/assets/js/138.9cce5814.js"><link rel="prefetch" href="/blogs/assets/js/139.f2c81b1b.js"><link rel="prefetch" href="/blogs/assets/js/14.7b32961c.js"><link rel="prefetch" href="/blogs/assets/js/140.53f770a1.js"><link rel="prefetch" href="/blogs/assets/js/141.e6fa1d98.js"><link rel="prefetch" href="/blogs/assets/js/142.62c55e8f.js"><link rel="prefetch" href="/blogs/assets/js/143.7549f438.js"><link rel="prefetch" href="/blogs/assets/js/144.ced6cbde.js"><link rel="prefetch" href="/blogs/assets/js/145.add84a23.js"><link rel="prefetch" href="/blogs/assets/js/146.201bba6f.js"><link rel="prefetch" href="/blogs/assets/js/147.004fd933.js"><link rel="prefetch" href="/blogs/assets/js/148.00d4af92.js"><link rel="prefetch" href="/blogs/assets/js/149.11c4409f.js"><link rel="prefetch" href="/blogs/assets/js/15.675ad06f.js"><link rel="prefetch" href="/blogs/assets/js/150.f33a8128.js"><link rel="prefetch" href="/blogs/assets/js/151.fdc17b21.js"><link rel="prefetch" href="/blogs/assets/js/152.a1ce7a18.js"><link rel="prefetch" href="/blogs/assets/js/153.5bb63f69.js"><link rel="prefetch" href="/blogs/assets/js/154.3607e484.js"><link rel="prefetch" href="/blogs/assets/js/155.511078f5.js"><link rel="prefetch" href="/blogs/assets/js/156.d5009c87.js"><link rel="prefetch" href="/blogs/assets/js/157.0a824cf6.js"><link rel="prefetch" href="/blogs/assets/js/158.c0603bdb.js"><link rel="prefetch" href="/blogs/assets/js/159.25b58ba7.js"><link rel="prefetch" href="/blogs/assets/js/16.6a27361b.js"><link rel="prefetch" href="/blogs/assets/js/160.c34ef543.js"><link rel="prefetch" href="/blogs/assets/js/161.b9e02baa.js"><link rel="prefetch" href="/blogs/assets/js/162.75018745.js"><link rel="prefetch" href="/blogs/assets/js/163.f0a369c5.js"><link rel="prefetch" href="/blogs/assets/js/164.d32c676e.js"><link rel="prefetch" href="/blogs/assets/js/165.9e2d795b.js"><link rel="prefetch" href="/blogs/assets/js/166.eecf5c64.js"><link rel="prefetch" href="/blogs/assets/js/167.d9bd5a2d.js"><link rel="prefetch" href="/blogs/assets/js/168.3fb76fbd.js"><link rel="prefetch" href="/blogs/assets/js/169.cfc08632.js"><link rel="prefetch" href="/blogs/assets/js/17.faeecc08.js"><link rel="prefetch" href="/blogs/assets/js/170.a5fce106.js"><link rel="prefetch" href="/blogs/assets/js/171.6c09228f.js"><link rel="prefetch" href="/blogs/assets/js/172.1e92dde8.js"><link rel="prefetch" href="/blogs/assets/js/173.95a786d0.js"><link rel="prefetch" href="/blogs/assets/js/174.489b6abf.js"><link rel="prefetch" href="/blogs/assets/js/175.f13f9492.js"><link rel="prefetch" href="/blogs/assets/js/176.9edf5422.js"><link rel="prefetch" href="/blogs/assets/js/177.a4d3f831.js"><link rel="prefetch" href="/blogs/assets/js/178.8ab2c620.js"><link rel="prefetch" href="/blogs/assets/js/179.76d199f5.js"><link rel="prefetch" href="/blogs/assets/js/18.be67149b.js"><link rel="prefetch" href="/blogs/assets/js/180.f8a53ddf.js"><link rel="prefetch" href="/blogs/assets/js/181.820d0270.js"><link rel="prefetch" href="/blogs/assets/js/182.f73bb8f9.js"><link rel="prefetch" href="/blogs/assets/js/183.d740b6fa.js"><link rel="prefetch" href="/blogs/assets/js/184.ea8a5b60.js"><link rel="prefetch" href="/blogs/assets/js/185.d2c8498b.js"><link rel="prefetch" href="/blogs/assets/js/186.abc0d54e.js"><link rel="prefetch" href="/blogs/assets/js/187.bdbc0e80.js"><link rel="prefetch" href="/blogs/assets/js/188.0189b94c.js"><link rel="prefetch" href="/blogs/assets/js/189.c85a4414.js"><link rel="prefetch" href="/blogs/assets/js/19.4988d564.js"><link rel="prefetch" href="/blogs/assets/js/190.236c416e.js"><link rel="prefetch" href="/blogs/assets/js/191.c7ab4472.js"><link rel="prefetch" href="/blogs/assets/js/192.17ab9df0.js"><link rel="prefetch" href="/blogs/assets/js/193.a21b5daa.js"><link rel="prefetch" href="/blogs/assets/js/194.f4e81371.js"><link rel="prefetch" href="/blogs/assets/js/195.c76aa31c.js"><link rel="prefetch" href="/blogs/assets/js/196.54e7d532.js"><link rel="prefetch" href="/blogs/assets/js/197.2d4a6310.js"><link rel="prefetch" href="/blogs/assets/js/198.7eb044c3.js"><link rel="prefetch" href="/blogs/assets/js/199.7d2a5a03.js"><link rel="prefetch" href="/blogs/assets/js/20.4b566c4e.js"><link rel="prefetch" href="/blogs/assets/js/200.7eef2a3d.js"><link rel="prefetch" href="/blogs/assets/js/201.069b4ab3.js"><link rel="prefetch" href="/blogs/assets/js/202.e2ed4b81.js"><link rel="prefetch" href="/blogs/assets/js/203.b024c086.js"><link rel="prefetch" href="/blogs/assets/js/204.45908a5d.js"><link rel="prefetch" href="/blogs/assets/js/205.d408484e.js"><link rel="prefetch" href="/blogs/assets/js/206.e5813f6b.js"><link rel="prefetch" href="/blogs/assets/js/207.1c12ac10.js"><link rel="prefetch" href="/blogs/assets/js/208.3ccdde2a.js"><link rel="prefetch" href="/blogs/assets/js/209.d3eca9f5.js"><link rel="prefetch" href="/blogs/assets/js/21.2f105b85.js"><link rel="prefetch" href="/blogs/assets/js/210.6204aeda.js"><link rel="prefetch" href="/blogs/assets/js/211.9859f74c.js"><link rel="prefetch" href="/blogs/assets/js/212.2b720ed3.js"><link rel="prefetch" href="/blogs/assets/js/213.c95a36dc.js"><link rel="prefetch" href="/blogs/assets/js/214.d83932f0.js"><link rel="prefetch" href="/blogs/assets/js/215.8b214281.js"><link rel="prefetch" href="/blogs/assets/js/216.ac070735.js"><link rel="prefetch" href="/blogs/assets/js/217.c7cd14c4.js"><link rel="prefetch" href="/blogs/assets/js/218.6abb414a.js"><link rel="prefetch" href="/blogs/assets/js/219.71419497.js"><link rel="prefetch" href="/blogs/assets/js/22.a71f72e5.js"><link rel="prefetch" href="/blogs/assets/js/220.22066f9f.js"><link rel="prefetch" href="/blogs/assets/js/221.20a92843.js"><link rel="prefetch" href="/blogs/assets/js/222.b7de5515.js"><link rel="prefetch" href="/blogs/assets/js/223.4109d4cf.js"><link rel="prefetch" href="/blogs/assets/js/224.e678a0e1.js"><link rel="prefetch" href="/blogs/assets/js/225.0ae91a9f.js"><link rel="prefetch" href="/blogs/assets/js/226.1fbdb6f7.js"><link rel="prefetch" href="/blogs/assets/js/227.ab2c9870.js"><link rel="prefetch" href="/blogs/assets/js/228.6c8df33f.js"><link rel="prefetch" href="/blogs/assets/js/229.0b6f4fc1.js"><link rel="prefetch" href="/blogs/assets/js/23.f6d57e29.js"><link rel="prefetch" href="/blogs/assets/js/230.723ee342.js"><link rel="prefetch" href="/blogs/assets/js/231.3174f8f6.js"><link rel="prefetch" href="/blogs/assets/js/232.c2b76211.js"><link rel="prefetch" href="/blogs/assets/js/234.92da14e8.js"><link rel="prefetch" href="/blogs/assets/js/235.b0c86693.js"><link rel="prefetch" href="/blogs/assets/js/236.63e87e5f.js"><link rel="prefetch" href="/blogs/assets/js/237.b4b2ea79.js"><link rel="prefetch" href="/blogs/assets/js/238.82cd9d87.js"><link rel="prefetch" href="/blogs/assets/js/239.cd4a0617.js"><link rel="prefetch" href="/blogs/assets/js/24.08137534.js"><link rel="prefetch" href="/blogs/assets/js/240.6e8db13e.js"><link rel="prefetch" href="/blogs/assets/js/241.f026e9d3.js"><link rel="prefetch" href="/blogs/assets/js/242.43c3bf4f.js"><link rel="prefetch" href="/blogs/assets/js/243.6edf58b4.js"><link rel="prefetch" href="/blogs/assets/js/244.c9770587.js"><link rel="prefetch" href="/blogs/assets/js/245.cc55cdec.js"><link rel="prefetch" href="/blogs/assets/js/246.3f41e305.js"><link rel="prefetch" href="/blogs/assets/js/247.019635db.js"><link rel="prefetch" href="/blogs/assets/js/248.f00169ed.js"><link rel="prefetch" href="/blogs/assets/js/249.a2193d5e.js"><link rel="prefetch" href="/blogs/assets/js/25.bec0cac3.js"><link rel="prefetch" href="/blogs/assets/js/250.9f62eb82.js"><link rel="prefetch" href="/blogs/assets/js/251.4bc7c48f.js"><link rel="prefetch" href="/blogs/assets/js/252.8f0ae3e5.js"><link rel="prefetch" href="/blogs/assets/js/253.bfa367bc.js"><link rel="prefetch" href="/blogs/assets/js/254.c2613d6d.js"><link rel="prefetch" href="/blogs/assets/js/255.a96f4223.js"><link rel="prefetch" href="/blogs/assets/js/256.a10bcf70.js"><link rel="prefetch" href="/blogs/assets/js/257.3036d8af.js"><link rel="prefetch" href="/blogs/assets/js/258.adf49845.js"><link rel="prefetch" href="/blogs/assets/js/259.44b45702.js"><link rel="prefetch" href="/blogs/assets/js/26.e47ac3c2.js"><link rel="prefetch" href="/blogs/assets/js/260.06c936a0.js"><link rel="prefetch" href="/blogs/assets/js/261.0312573a.js"><link rel="prefetch" href="/blogs/assets/js/262.be1125e8.js"><link rel="prefetch" href="/blogs/assets/js/263.37fc07f6.js"><link rel="prefetch" href="/blogs/assets/js/264.1eca2fa6.js"><link rel="prefetch" href="/blogs/assets/js/265.581a03a6.js"><link rel="prefetch" href="/blogs/assets/js/266.5e1f66da.js"><link rel="prefetch" href="/blogs/assets/js/267.c5562c99.js"><link rel="prefetch" href="/blogs/assets/js/268.db3b6351.js"><link rel="prefetch" href="/blogs/assets/js/269.2f496567.js"><link rel="prefetch" href="/blogs/assets/js/27.a761f1b4.js"><link rel="prefetch" href="/blogs/assets/js/270.08bdf7ea.js"><link rel="prefetch" href="/blogs/assets/js/271.93825664.js"><link rel="prefetch" href="/blogs/assets/js/272.5b9eb933.js"><link rel="prefetch" href="/blogs/assets/js/273.810a866e.js"><link rel="prefetch" href="/blogs/assets/js/274.790aa856.js"><link rel="prefetch" href="/blogs/assets/js/275.1d7d1d14.js"><link rel="prefetch" href="/blogs/assets/js/276.7e495a0c.js"><link rel="prefetch" href="/blogs/assets/js/277.e25c06a9.js"><link rel="prefetch" href="/blogs/assets/js/278.e38d0bd9.js"><link rel="prefetch" href="/blogs/assets/js/279.8c2eee52.js"><link rel="prefetch" href="/blogs/assets/js/28.30db7b1e.js"><link rel="prefetch" href="/blogs/assets/js/280.4ac0a14c.js"><link rel="prefetch" href="/blogs/assets/js/281.37ac3da3.js"><link rel="prefetch" href="/blogs/assets/js/282.f08e4c7e.js"><link rel="prefetch" href="/blogs/assets/js/283.891c68fe.js"><link rel="prefetch" href="/blogs/assets/js/284.dd3afcbe.js"><link rel="prefetch" href="/blogs/assets/js/285.d9ccfd9d.js"><link rel="prefetch" href="/blogs/assets/js/286.b2e64de4.js"><link rel="prefetch" href="/blogs/assets/js/287.baea5511.js"><link rel="prefetch" href="/blogs/assets/js/288.8093d412.js"><link rel="prefetch" href="/blogs/assets/js/289.b54e228b.js"><link rel="prefetch" href="/blogs/assets/js/29.71946b19.js"><link rel="prefetch" href="/blogs/assets/js/290.1caf7beb.js"><link rel="prefetch" href="/blogs/assets/js/291.8ba4ff37.js"><link rel="prefetch" href="/blogs/assets/js/3.c84ff1ce.js"><link rel="prefetch" href="/blogs/assets/js/30.cae4b0c2.js"><link rel="prefetch" href="/blogs/assets/js/31.beec2977.js"><link rel="prefetch" href="/blogs/assets/js/32.812b083e.js"><link rel="prefetch" href="/blogs/assets/js/33.ce6a8a01.js"><link rel="prefetch" href="/blogs/assets/js/34.d8a8072a.js"><link rel="prefetch" href="/blogs/assets/js/35.cb894856.js"><link rel="prefetch" href="/blogs/assets/js/36.cdc5b737.js"><link rel="prefetch" href="/blogs/assets/js/37.c751f4b3.js"><link rel="prefetch" href="/blogs/assets/js/38.654e3020.js"><link rel="prefetch" href="/blogs/assets/js/39.19af7505.js"><link rel="prefetch" href="/blogs/assets/js/4.e31e2f42.js"><link rel="prefetch" href="/blogs/assets/js/40.dab2fc5a.js"><link rel="prefetch" href="/blogs/assets/js/41.069f5955.js"><link rel="prefetch" href="/blogs/assets/js/42.2ad4d631.js"><link rel="prefetch" href="/blogs/assets/js/43.6a8a1a3a.js"><link rel="prefetch" href="/blogs/assets/js/44.7f0371f7.js"><link rel="prefetch" href="/blogs/assets/js/45.546f7e99.js"><link rel="prefetch" href="/blogs/assets/js/46.700d655a.js"><link rel="prefetch" href="/blogs/assets/js/47.5fc3769d.js"><link rel="prefetch" href="/blogs/assets/js/48.02bddba7.js"><link rel="prefetch" href="/blogs/assets/js/49.bc986450.js"><link rel="prefetch" href="/blogs/assets/js/5.b90df075.js"><link rel="prefetch" href="/blogs/assets/js/50.521274f1.js"><link rel="prefetch" href="/blogs/assets/js/51.f9973e9c.js"><link rel="prefetch" href="/blogs/assets/js/52.49062bfe.js"><link rel="prefetch" href="/blogs/assets/js/53.3c409809.js"><link rel="prefetch" href="/blogs/assets/js/54.8e4bc1d2.js"><link rel="prefetch" href="/blogs/assets/js/55.7c98e42f.js"><link rel="prefetch" href="/blogs/assets/js/56.e24105d2.js"><link rel="prefetch" href="/blogs/assets/js/57.6848cce1.js"><link rel="prefetch" href="/blogs/assets/js/58.5d1f219e.js"><link rel="prefetch" href="/blogs/assets/js/59.039508ac.js"><link rel="prefetch" href="/blogs/assets/js/60.cc53c007.js"><link rel="prefetch" href="/blogs/assets/js/61.de065123.js"><link rel="prefetch" href="/blogs/assets/js/62.6fda3ca3.js"><link rel="prefetch" href="/blogs/assets/js/63.4236ef4b.js"><link rel="prefetch" href="/blogs/assets/js/64.f1487e44.js"><link rel="prefetch" href="/blogs/assets/js/65.32fba8f2.js"><link rel="prefetch" href="/blogs/assets/js/66.13adcea1.js"><link rel="prefetch" href="/blogs/assets/js/67.82d67e36.js"><link rel="prefetch" href="/blogs/assets/js/68.b4b34079.js"><link rel="prefetch" href="/blogs/assets/js/69.a3465ebd.js"><link rel="prefetch" href="/blogs/assets/js/7.a1cd7f66.js"><link rel="prefetch" href="/blogs/assets/js/70.2a1dd83f.js"><link rel="prefetch" href="/blogs/assets/js/71.93a1ddc9.js"><link rel="prefetch" href="/blogs/assets/js/72.3acced1a.js"><link rel="prefetch" href="/blogs/assets/js/73.1640c847.js"><link rel="prefetch" href="/blogs/assets/js/74.4125ce85.js"><link rel="prefetch" href="/blogs/assets/js/75.ee821f14.js"><link rel="prefetch" href="/blogs/assets/js/76.fc724a08.js"><link rel="prefetch" href="/blogs/assets/js/77.dd15769c.js"><link rel="prefetch" href="/blogs/assets/js/78.31c80a7b.js"><link rel="prefetch" href="/blogs/assets/js/79.af451c09.js"><link rel="prefetch" href="/blogs/assets/js/8.cbf54ac0.js"><link rel="prefetch" href="/blogs/assets/js/80.0cb8db56.js"><link rel="prefetch" href="/blogs/assets/js/81.7bafd146.js"><link rel="prefetch" href="/blogs/assets/js/82.c22b8301.js"><link rel="prefetch" href="/blogs/assets/js/83.e44d74cd.js"><link rel="prefetch" href="/blogs/assets/js/84.fd2d8d0a.js"><link rel="prefetch" href="/blogs/assets/js/85.cd40fd72.js"><link rel="prefetch" href="/blogs/assets/js/86.d81b7850.js"><link rel="prefetch" href="/blogs/assets/js/87.2a53ea0d.js"><link rel="prefetch" href="/blogs/assets/js/88.4b78c3ac.js"><link rel="prefetch" href="/blogs/assets/js/89.f002b20f.js"><link rel="prefetch" href="/blogs/assets/js/9.73b90ff8.js"><link rel="prefetch" href="/blogs/assets/js/90.0ee150aa.js"><link rel="prefetch" href="/blogs/assets/js/91.4980d2e3.js"><link rel="prefetch" href="/blogs/assets/js/92.3c904a3f.js"><link rel="prefetch" href="/blogs/assets/js/93.c9a17b8b.js"><link rel="prefetch" href="/blogs/assets/js/94.c49d9982.js"><link rel="prefetch" href="/blogs/assets/js/95.53dd1d74.js"><link rel="prefetch" href="/blogs/assets/js/96.45635662.js"><link rel="prefetch" href="/blogs/assets/js/97.e60d07fc.js"><link rel="prefetch" href="/blogs/assets/js/98.a1558f22.js"><link rel="prefetch" href="/blogs/assets/js/99.a82bf309.js">
    <link rel="stylesheet" href="/blogs/assets/css/0.styles.6da96bf9.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container have-rightmenu" data-v-f848d4e8><div class="global-loading-wrapper" data-v-3a334c6d data-v-f848d4e8 data-v-f848d4e8><div class="loader-main" data-v-3a334c6d><img src="/blogs/assets/img/loading.a592e2e5.jpg" alt="loading" data-v-3a334c6d></div></div> <div class="hide" data-v-f848d4e8><header class="navbar" data-v-f848d4e8><div title="目录" class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/blogs/" class="home-link router-link-active"><img src="/blogs/img/kmc.jpg" alt="卡夫卡的岛上书店" class="logo"> <span class="site-name">卡夫卡的岛上书店</span></a> <div class="links"><div class="color-picker"><a class="color-button"><i class="iconfont reco-color"></i></a> <div class="color-picker-menu" style="display:none;"><div class="mode-options"><h4 class="title">选择模式</h4> <ul class="color-mode-options"><li class="dark">深色模式</li><li class="light active">浅色模式</li><li class="read">阅读模式</li></ul></div></div></div> <div class="search-box"><i class="iconfont reco-search"></i> <input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <ul class="suggestions" style="display:none;"></ul></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/blogs/" class="nav-link"><i class="iconfont reco-home"></i>首页
</a></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title"><a href="/blogs/web/" class="nav-link"><i></i>前端
      </a></span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>文档教程</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/blogs/web/docs/imooc/wiki/" class="nav-link"><i class="iconfont reco-blog"></i>慕课教程
</a></li><li class="dropdown-subitem"><a href="/blogs/web/docs/es6/" class="nav-link"><i class="iconfont reco-blog"></i>ES6 入门教程
</a></li><li class="dropdown-subitem"><a href="/blogs/web/docs/wangdoc/javascript/" class="nav-link"><i class="iconfont reco-blog"></i>网道-JavaScript 教程
</a></li><li class="dropdown-subitem"><a href="/blogs/web/docs/angular/" class="nav-link"><i class="iconfont reco-blog"></i>Angular 文档
</a></li><li class="dropdown-subitem"><a href="/blogs/web/docs/react/" class="nav-link"><i class="iconfont reco-blog"></i>React 文档
</a></li><li class="dropdown-subitem"><a href="/blogs/web/docs/vue/" class="nav-link"><i class="iconfont reco-blog"></i>Vue 文档
</a></li><li class="dropdown-subitem"><a href="/blogs/web/docs/node/" class="nav-link"><i class="iconfont reco-blog"></i>Node 文档
</a></li><li class="dropdown-subitem"><a href="/blogs/web/docs/babel/" class="nav-link"><i class="iconfont reco-blog"></i>Babel 文档
</a></li><li class="dropdown-subitem"><a href="/blogs/web/docs/webpack/" class="nav-link"><i class="iconfont reco-blog"></i>Webpack 文档
</a></li><li class="dropdown-subitem"><a href="/blogs/web/docs/typescript/" class="nav-link"><i class="iconfont reco-blog"></i>TypeScript 文档
</a></li><li class="dropdown-subitem"><a href="/blogs/web/docs/runoob/" class="nav-link"><i class="iconfont reco-blog"></i>菜鸟教程
</a></li><li class="dropdown-subitem"><a href="/blogs/web/docs/docschina/" class="nav-link"><i class="iconfont reco-blog"></i>印记中文
</a></li></ul></li><li class="dropdown-item"><h4>专栏笔记</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/blogs/column-notes/33-js/" class="nav-link"><i class="iconfont reco-blog"></i>JavaScript的33个概念
</a></li><li class="dropdown-subitem"><a href="/blogs/column-notes/relearn-frontend/" class="nav-link router-link-active"><i class="iconfont reco-blog"></i>重学前端
</a></li><li class="dropdown-subitem"><a href="/blogs/column-notes/http-protocol/" class="nav-link"><i class="iconfont reco-blog"></i>透视HTTP协议
</a></li><li class="dropdown-subitem"><a href="/blogs/column-notes/play-webpack/" class="nav-link"><i class="iconfont reco-blog"></i>玩转webpack
</a></li><li class="dropdown-subitem"><a href="/blogs/column-notes/browser-principle/" class="nav-link"><i class="iconfont reco-blog"></i>浏览器工作原理与实践
</a></li></ul></li><li class="dropdown-item"><h4>书籍笔记</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/blogs/book-notes/donot-know-javascript/" class="nav-link"><i class="iconfont reco-blog"></i>你不知道的JavaScript
</a></li></ul></li><li class="dropdown-item"><h4>推荐博客</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/blogs/web/ruanyifeng/" class="nav-link"><i class="iconfont reco-blog"></i>阮一峰的个人网站
</a></li><li class="dropdown-subitem"><a href="/blogs/web/liaoxuefeng/" class="nav-link"><i class="iconfont reco-blog"></i>廖雪峰的官方网站
</a></li></ul></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title"><a href="/blogs/library/" class="nav-link"><i></i>图书馆
      </a></span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>太易</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/blogs/library/map/" class="nav-link"><i class="iconfont reco-blog"></i>时间地图
</a></li></ul></li><li class="dropdown-item"><h4>太初</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/blogs/library/wiki/" class="nav-link"><i class="iconfont reco-blog"></i>中文维基百科
</a></li></ul></li><li class="dropdown-item"><h4>太始</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/blogs/library/wdl/" class="nav-link"><i class="iconfont reco-blog"></i>世界数字图书馆
</a></li></ul></li><li class="dropdown-item"><h4>太素</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/blogs/library/douban/" class="nav-link"><i class="iconfont reco-blog"></i>豆瓣榜单
</a></li><li class="dropdown-subitem"><a href="/blogs/library/open163/" class="nav-link"><i class="iconfont reco-blog"></i>网易公开课
</a></li></ul></li><li class="dropdown-item"><h4>太极</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/blogs/library/shici/" class="nav-link"><i class="iconfont reco-blog"></i>中华诗词
</a></li><li class="dropdown-subitem"><a href="/blogs/library/processon/" class="nav-link"><i class="iconfont reco-blog"></i>ProcessOn图形化知识资源
</a></li></ul></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title"><a href="/blogs/idealism/" class="nav-link"><i></i>昨日与明日
      </a></span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>昨日</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/blogs/idealism/music/" class="nav-link"><i class="iconfont reco-blog"></i>音乐
</a></li></ul></li><li class="dropdown-item"><h4>今日</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/blogs/idealism/philosophy/" class="nav-link"><i class="iconfont reco-blog"></i>哲学
</a></li></ul></li><li class="dropdown-item"><h4>明日</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/blogs/idealism/kaimo/" class="nav-link"><i class="iconfont reco-blog"></i>忧伤的年轻人
</a></li></ul></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title"><i class="iconfont reco-api"></i>索引
    </span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/blogs/sitemap/" class="nav-link"><i class="iconfont reco-blog"></i>总目录
</a></li><li class="dropdown-item"><!----> <a href="/blogs/categories/" class="nav-link"><i class="iconfont reco-category"></i>分类
</a></li><li class="dropdown-item"><!----> <a href="/blogs/tags/" class="nav-link"><i class="iconfont reco-tag"></i>标签
</a></li><li class="dropdown-item"><!----> <a href="/blogs/archives/" class="nav-link"><i class="iconfont reco-date"></i>归档
</a></li></ul></div></div><div class="nav-item"><a href="/blogs/bookshop/message-board/" class="nav-link"><i class="iconfont reco-suggestion"></i>留言板
</a></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title"><i class="iconfont reco-message"></i>关于
    </span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>联系</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="https://blog.csdn.net/kaimo313" target="_blank" rel="noopener noreferrer" class="nav-link external"><i class="iconfont reco-csdn"></i>CSDN
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://gitee.com/kaimo313" target="_blank" rel="noopener noreferrer" class="nav-link external"><i class="iconfont reco-mayun"></i>Gitee
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://github.com/kaimo313" target="_blank" rel="noopener noreferrer" class="nav-link external"><i class="iconfont reco-github"></i>GitHub
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="/blogs/bookshop/linkme/" class="nav-link"><i class="iconfont reco-account"></i>联系店长
</a></li></ul></li><li class="dropdown-item"><h4>博客</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/blogs/bookshop/explain/" class="nav-link"><i class="iconfont reco-document"></i>博客说明
</a></li><li class="dropdown-subitem"><a href="/blogs/bookshop/logs/" class="nav-link"><i class="iconfont reco-document"></i>更新日志
</a></li></ul></li><li class="dropdown-item"><h4>其他</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/blogs/resource-tools/" class="nav-link"><i class="iconfont reco-document"></i>资源工具
</a></li><li class="dropdown-subitem"><a href="/blogs/bookshop/friendslink/" class="nav-link"><i class="iconfont reco-friend"></i>友情链接
</a></li></ul></li></ul></div></div> <!----></nav></div></header> <div class="sidebar-mask" data-v-f848d4e8></div> <aside class="sidebar" data-v-f848d4e8><div class="personal-info-wrapper" data-v-34faaed8 data-v-f848d4e8><img src="/blogs/img/avatar.jpg" alt="author-avatar" class="personal-img" data-v-34faaed8> <div class="author" data-v-34faaed8>
    凯小默
  </div> <div class="personal-info-details" data-v-34faaed8><div data-v-34faaed8>文章：<span data-v-34faaed8>224</span></div> <div data-v-34faaed8>地点：<span data-v-34faaed8>canton</span></div></div> <div class="slogan" data-v-34faaed8>
    standing on the shoulders of giants
  </div> <ul class="social-links" data-v-34faaed8><li class="social-item" data-v-34faaed8><i class="iconfont reco-csdn" style="color:#fc5531;" data-v-34faaed8></i></li><li class="social-item" data-v-34faaed8><i class="iconfont reco-mayun" style="color:#c71d24;" data-v-34faaed8></i></li><li class="social-item" data-v-34faaed8><i class="iconfont reco-bilibili" style="color:#fb7299;" data-v-34faaed8></i></li><li class="social-item" data-v-34faaed8><i class="iconfont reco-github" style="color:#3eaf7c;" data-v-34faaed8></i></li><li class="social-item" data-v-34faaed8><i class="iconfont reco-mail" style="color:#00a1d6;" data-v-34faaed8></i></li></ul></div> <nav class="nav-links"><div class="nav-item"><a href="/blogs/" class="nav-link"><i class="iconfont reco-home"></i>首页
</a></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title"><a href="/blogs/web/" class="nav-link"><i></i>前端
      </a></span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>文档教程</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/blogs/web/docs/imooc/wiki/" class="nav-link"><i class="iconfont reco-blog"></i>慕课教程
</a></li><li class="dropdown-subitem"><a href="/blogs/web/docs/es6/" class="nav-link"><i class="iconfont reco-blog"></i>ES6 入门教程
</a></li><li class="dropdown-subitem"><a href="/blogs/web/docs/wangdoc/javascript/" class="nav-link"><i class="iconfont reco-blog"></i>网道-JavaScript 教程
</a></li><li class="dropdown-subitem"><a href="/blogs/web/docs/angular/" class="nav-link"><i class="iconfont reco-blog"></i>Angular 文档
</a></li><li class="dropdown-subitem"><a href="/blogs/web/docs/react/" class="nav-link"><i class="iconfont reco-blog"></i>React 文档
</a></li><li class="dropdown-subitem"><a href="/blogs/web/docs/vue/" class="nav-link"><i class="iconfont reco-blog"></i>Vue 文档
</a></li><li class="dropdown-subitem"><a href="/blogs/web/docs/node/" class="nav-link"><i class="iconfont reco-blog"></i>Node 文档
</a></li><li class="dropdown-subitem"><a href="/blogs/web/docs/babel/" class="nav-link"><i class="iconfont reco-blog"></i>Babel 文档
</a></li><li class="dropdown-subitem"><a href="/blogs/web/docs/webpack/" class="nav-link"><i class="iconfont reco-blog"></i>Webpack 文档
</a></li><li class="dropdown-subitem"><a href="/blogs/web/docs/typescript/" class="nav-link"><i class="iconfont reco-blog"></i>TypeScript 文档
</a></li><li class="dropdown-subitem"><a href="/blogs/web/docs/runoob/" class="nav-link"><i class="iconfont reco-blog"></i>菜鸟教程
</a></li><li class="dropdown-subitem"><a href="/blogs/web/docs/docschina/" class="nav-link"><i class="iconfont reco-blog"></i>印记中文
</a></li></ul></li><li class="dropdown-item"><h4>专栏笔记</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/blogs/column-notes/33-js/" class="nav-link"><i class="iconfont reco-blog"></i>JavaScript的33个概念
</a></li><li class="dropdown-subitem"><a href="/blogs/column-notes/relearn-frontend/" class="nav-link router-link-active"><i class="iconfont reco-blog"></i>重学前端
</a></li><li class="dropdown-subitem"><a href="/blogs/column-notes/http-protocol/" class="nav-link"><i class="iconfont reco-blog"></i>透视HTTP协议
</a></li><li class="dropdown-subitem"><a href="/blogs/column-notes/play-webpack/" class="nav-link"><i class="iconfont reco-blog"></i>玩转webpack
</a></li><li class="dropdown-subitem"><a href="/blogs/column-notes/browser-principle/" class="nav-link"><i class="iconfont reco-blog"></i>浏览器工作原理与实践
</a></li></ul></li><li class="dropdown-item"><h4>书籍笔记</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/blogs/book-notes/donot-know-javascript/" class="nav-link"><i class="iconfont reco-blog"></i>你不知道的JavaScript
</a></li></ul></li><li class="dropdown-item"><h4>推荐博客</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/blogs/web/ruanyifeng/" class="nav-link"><i class="iconfont reco-blog"></i>阮一峰的个人网站
</a></li><li class="dropdown-subitem"><a href="/blogs/web/liaoxuefeng/" class="nav-link"><i class="iconfont reco-blog"></i>廖雪峰的官方网站
</a></li></ul></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title"><a href="/blogs/library/" class="nav-link"><i></i>图书馆
      </a></span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>太易</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/blogs/library/map/" class="nav-link"><i class="iconfont reco-blog"></i>时间地图
</a></li></ul></li><li class="dropdown-item"><h4>太初</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/blogs/library/wiki/" class="nav-link"><i class="iconfont reco-blog"></i>中文维基百科
</a></li></ul></li><li class="dropdown-item"><h4>太始</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/blogs/library/wdl/" class="nav-link"><i class="iconfont reco-blog"></i>世界数字图书馆
</a></li></ul></li><li class="dropdown-item"><h4>太素</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/blogs/library/douban/" class="nav-link"><i class="iconfont reco-blog"></i>豆瓣榜单
</a></li><li class="dropdown-subitem"><a href="/blogs/library/open163/" class="nav-link"><i class="iconfont reco-blog"></i>网易公开课
</a></li></ul></li><li class="dropdown-item"><h4>太极</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/blogs/library/shici/" class="nav-link"><i class="iconfont reco-blog"></i>中华诗词
</a></li><li class="dropdown-subitem"><a href="/blogs/library/processon/" class="nav-link"><i class="iconfont reco-blog"></i>ProcessOn图形化知识资源
</a></li></ul></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title"><a href="/blogs/idealism/" class="nav-link"><i></i>昨日与明日
      </a></span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>昨日</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/blogs/idealism/music/" class="nav-link"><i class="iconfont reco-blog"></i>音乐
</a></li></ul></li><li class="dropdown-item"><h4>今日</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/blogs/idealism/philosophy/" class="nav-link"><i class="iconfont reco-blog"></i>哲学
</a></li></ul></li><li class="dropdown-item"><h4>明日</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/blogs/idealism/kaimo/" class="nav-link"><i class="iconfont reco-blog"></i>忧伤的年轻人
</a></li></ul></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title"><i class="iconfont reco-api"></i>索引
    </span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/blogs/sitemap/" class="nav-link"><i class="iconfont reco-blog"></i>总目录
</a></li><li class="dropdown-item"><!----> <a href="/blogs/categories/" class="nav-link"><i class="iconfont reco-category"></i>分类
</a></li><li class="dropdown-item"><!----> <a href="/blogs/tags/" class="nav-link"><i class="iconfont reco-tag"></i>标签
</a></li><li class="dropdown-item"><!----> <a href="/blogs/archives/" class="nav-link"><i class="iconfont reco-date"></i>归档
</a></li></ul></div></div><div class="nav-item"><a href="/blogs/bookshop/message-board/" class="nav-link"><i class="iconfont reco-suggestion"></i>留言板
</a></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title"><i class="iconfont reco-message"></i>关于
    </span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>联系</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="https://blog.csdn.net/kaimo313" target="_blank" rel="noopener noreferrer" class="nav-link external"><i class="iconfont reco-csdn"></i>CSDN
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://gitee.com/kaimo313" target="_blank" rel="noopener noreferrer" class="nav-link external"><i class="iconfont reco-mayun"></i>Gitee
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://github.com/kaimo313" target="_blank" rel="noopener noreferrer" class="nav-link external"><i class="iconfont reco-github"></i>GitHub
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="/blogs/bookshop/linkme/" class="nav-link"><i class="iconfont reco-account"></i>联系店长
</a></li></ul></li><li class="dropdown-item"><h4>博客</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/blogs/bookshop/explain/" class="nav-link"><i class="iconfont reco-document"></i>博客说明
</a></li><li class="dropdown-subitem"><a href="/blogs/bookshop/logs/" class="nav-link"><i class="iconfont reco-document"></i>更新日志
</a></li></ul></li><li class="dropdown-item"><h4>其他</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/blogs/resource-tools/" class="nav-link"><i class="iconfont reco-document"></i>资源工具
</a></li><li class="dropdown-subitem"><a href="/blogs/bookshop/friendslink/" class="nav-link"><i class="iconfont reco-friend"></i>友情链接
</a></li></ul></li></ul></div></div> <!----></nav> <ul class="sidebar-links"><li><a href="/blogs/column-notes/relearn-frontend/1805891487ecd/" class="sidebar-link">前端发展史以及学习痛点（一）</a></li><li><a href="/blogs/column-notes/relearn-frontend/f3fccebc30c8d/" class="sidebar-link">前端学习路线与方法（二）</a></li><li><a href="/blogs/column-notes/relearn-frontend/2b11f267203bf/" class="sidebar-link">前端知识框架图（三）</a></li><li><a href="/blogs/column-notes/relearn-frontend/de5e164460bed/" class="sidebar-link">div和span不是够用吗？（四）</a></li><li><a href="/blogs/column-notes/relearn-frontend/725a09b8bce3c/" class="sidebar-link">如何运用语义类标签来呈现Wiki网页？（五）</a></li><li><a href="/blogs/column-notes/relearn-frontend/c456c11d6382/" class="sidebar-link">JavaScript类型有哪些你不知道的细节？（六）</a></li><li><a href="/blogs/column-notes/relearn-frontend/555837a687b86/" class="sidebar-link">JavaScript对象：面向对象还是基于对象？（七）</a></li><li><a href="/blogs/column-notes/relearn-frontend/f623c2941786d/" class="sidebar-link">JavaScript中的原型和类（八）</a></li><li><a href="/blogs/column-notes/relearn-frontend/f460a7a9947d2/" class="sidebar-link">JavaScript中的对象分类（九）</a></li><li><a href="/blogs/column-notes/relearn-frontend/d70f21e4618d9/" class="sidebar-link">CSS语法关于带@的规则（十）</a></li><li><a href="/blogs/column-notes/relearn-frontend/243cad764450e/" class="sidebar-link">浏览器工作解析一（十一）</a></li><li><a href="/blogs/column-notes/relearn-frontend/0e84e0e76fd54/" class="sidebar-link">浏览器工作解析二（十二）</a></li><li><a href="/blogs/column-notes/relearn-frontend/78886ea8241e/" class="sidebar-link">浏览器工作解析三（十三）</a></li><li><a href="/blogs/column-notes/relearn-frontend/ec0ac125b600f/" class="sidebar-link">浏览器工作解析四（十四）</a></li><li><a href="/blogs/column-notes/relearn-frontend/e4742b82ae301/" class="sidebar-link">浏览器工作解析五（十五）</a></li><li><a href="/blogs/column-notes/relearn-frontend/4c69f05055ea8/" class="sidebar-link">HTML元信息类标签（十六）</a></li><li><a href="/blogs/column-notes/relearn-frontend/17cd15c7a77b4/" class="sidebar-link">Promise里的代码为什么比setTimeout先执行？（十七）</a></li><li><a href="/blogs/column-notes/relearn-frontend/12faa4ea9ea08/" class="sidebar-link">JavaScript的闭包和执行上下文（十八）</a></li><li><a href="/blogs/column-notes/relearn-frontend/73e250a9b22af/" class="sidebar-link">JavaScript中的函数（十九）</a></li><li><a href="/blogs/column-notes/relearn-frontend/08e4cc34ba3cb/" class="sidebar-link">try里面放return，finally还会执行吗？（二十）</a></li><li><a href="/blogs/column-notes/relearn-frontend/719d776263f0e/" class="sidebar-link">如何选中svg里的a元素？（二十一）</a></li><li><a href="/blogs/column-notes/relearn-frontend/9097c35c96bea/" class="sidebar-link">选择器的机制（二十二）</a></li><li><a href="/blogs/column-notes/relearn-frontend/772af53fa3d84/" class="sidebar-link">狭义的文档对象DOM（二十三）</a></li><li><a href="/blogs/column-notes/relearn-frontend/03564c41a047a/" class="sidebar-link">HTML里的链接元素（二十四）</a></li><li><a href="/blogs/column-notes/relearn-frontend/5969182f12139/" class="sidebar-link">CSS的正常流（二十五）</a></li><li><a href="/blogs/column-notes/relearn-frontend/123af55bc7a9f/" class="sidebar-link">CSSOM（二十六）</a></li><li><a href="/blogs/column-notes/relearn-frontend/157f34079fad3/" class="sidebar-link">JavaScript的词法（二十七）</a></li><li><a href="/blogs/column-notes/relearn-frontend/7781a67f82b2e/" aria-current="page" class="active sidebar-link">通过四则运算的解释器快速理解编译原理（二十八）</a></li><li><a href="/blogs/column-notes/relearn-frontend/568a66cc101ec/" class="sidebar-link">JavaScript中要不要加分号？（二十九）</a></li><li><a href="/blogs/column-notes/relearn-frontend/927fc9cdb8e47/" class="sidebar-link">JavaScript语法的基本规则（三十）</a></li><li><a href="/blogs/column-notes/relearn-frontend/2ea4565a5af87/" class="sidebar-link">JavaScript的语句（三十一）</a></li><li><a href="/blogs/column-notes/relearn-frontend/c94a3f18dce7d/" class="sidebar-link">JavaScript的表达式语句（三十二）</a></li><li><a href="/blogs/column-notes/relearn-frontend/0a7056166c256/" class="sidebar-link">JavaScript表达式的右边部分（三十三）</a></li><li><a href="/blogs/column-notes/relearn-frontend/89c35855f31fb/" class="sidebar-link">什么是替换型元素？（三十四）</a></li><li><a href="/blogs/column-notes/relearn-frontend/dd56c4ed8d29f/" class="sidebar-link">HTML标准分析（三十五）</a></li><li><a href="/blogs/column-notes/relearn-frontend/03e7c69bea138/" class="sidebar-link">Flex 布局（三十六）</a></li><li><a href="/blogs/column-notes/relearn-frontend/7f930e3b3aa0a/" class="sidebar-link">浏览器事件（三十七）</a></li><li><a href="/blogs/column-notes/relearn-frontend/adda4d0e092a7/" class="sidebar-link">浏览器API（三十八）</a></li><li><a href="/blogs/column-notes/relearn-frontend/5961ea2d05da3/" class="sidebar-link">CSS的动画和交互（三十九）</a></li><li><a href="/blogs/column-notes/relearn-frontend/72bb7bf80d5a7/" class="sidebar-link">HTML语言（四十）</a></li><li><a href="/blogs/column-notes/relearn-frontend/8ec6d138850ce/" class="sidebar-link">CSS的颜色（四十一）</a></li><li><a href="/blogs/column-notes/relearn-frontend/09d0373767bed/" class="sidebar-link">用代码挖掘W3C中的CSS属性（四十二）</a></li><li><a href="/blogs/column-notes/relearn-frontend/8fe235ed7ef7f/" class="sidebar-link">HTML的可访问性ARIA（四十三）</a></li><li><a href="/blogs/column-notes/relearn-frontend/08c948fa8bf4a/" class="sidebar-link">一个前端工程师到底需要掌握哪些技能？（完结篇）</a></li></ul> </aside> <div><main class="page"><div class="theme-vdoing-wrapper bg-style-8"><div class="articleInfo-wrap" data-v-13f19dad><div class="articleInfo" data-v-13f19dad><ul class="breadcrumbs" data-v-13f19dad><li data-v-13f19dad><a href="/blogs/" title="首页" class="fa fa-laptop-house router-link-active" data-v-13f19dad></a></li> <li data-v-13f19dad><a href="/blogs/column-notes/relearn-frontend/" title="重学前端-目录页" class="router-link-active" data-v-13f19dad>重学前端</a></li> <!----> <!----></ul> <div class="info" data-v-13f19dad><div title="作者" class="author fa fa-user" data-v-13f19dad><a href="javascript:;" data-v-13f19dad>凯小默</a></div> <div title="创建时间" class="date fa fa-calendar-alt" data-v-13f19dad><a href="javascript:;" data-v-13f19dad>2019/06/05 00:00:00</a></div> <!----></div></div></div> <!----> <div class="content-wrapper"><div class="right-menu-wrapper"><div class="right-menu-margin"><div class="right-menu-content"></div></div></div> <h1><img src="">
            通过四则运算的解释器快速理解编译原理（二十八）
          </h1> <div class="theme-vdoing-content content__default"><h2 id="一、分析"><a href="#一、分析" class="header-anchor">#</a> 一、分析</h2> <blockquote><p>按照编译原理相关的知识，将其分成几个步骤。</p></blockquote> <ul><li><code>定义四则运算</code>：产出四则运算的词法定义和语法定义。</li> <li><code>词法分析</code>：把输入的字符串流变成 token。</li> <li><code>语法分析</code>：把 token 变成抽象语法树 AST。</li> <li><code>解释执行</code>：后序遍历 AST，执行得出结果。</li></ul> <h2 id="二、定义四则运算"><a href="#二、定义四则运算" class="header-anchor">#</a> 二、定义四则运算</h2> <h3 id="_2-1、定义词法"><a href="#_2-1、定义词法" class="header-anchor">#</a> 2.1、定义词法</h3> <ul><li><strong>Token</strong> <ul><li><strong>Number</strong>: <code>1 2 3 4 5 6 7 8 9 0</code> 的组合</li> <li><strong>Operator</strong>: <code>+、-、*、/</code> 之一</li></ul></li> <li><strong>Whitespace</strong>：<code>&lt;sp&gt;</code></li> <li><strong>LineTerminator</strong>：<code>&lt;LE&gt; &lt;CR&gt;</code></li></ul> <h3 id="_2-2、定义语法"><a href="#_2-2、定义语法" class="header-anchor">#</a> 2.2、定义语法</h3> <blockquote><p>语法定义多数采用 BNF。<a href="https://baike.baidu.com/item/BNF/7328753?fr=aladdin" target="_blank" rel="noopener noreferrer">巴科斯范式<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>(BNF: <code>Backus-Naur Form</code> 的缩写)是由 John Backus 和 Peter Naur 首次引入一种形式化符号来描述给定语言的语法（最早用于描述ALGOL 60 编程语言）。JavaScript 标准里面就是一种跟 BNF 类似的自创语法。</p></blockquote> <p>1、加法是由若干个乘法再由加号或者减号连接成的：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token operator">&lt;</span>Expression<span class="token operator">&gt;</span> <span class="token operator">:</span><span class="token operator">:</span><span class="token operator">=</span>
    <span class="token operator">&lt;</span>AdditiveExpression<span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token constant">EOF</span><span class="token operator">&gt;</span>

<span class="token operator">&lt;</span>AdditiveExpression<span class="token operator">&gt;</span> <span class="token operator">:</span><span class="token operator">:</span><span class="token operator">=</span>
    <span class="token operator">&lt;</span>MultiplicativeExpression<span class="token operator">&gt;</span>
    <span class="token operator">|</span><span class="token operator">&lt;</span>AdditiveExpression<span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">+</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span>MultiplicativeExpression<span class="token operator">&gt;</span>
    <span class="token operator">|</span><span class="token operator">&lt;</span>AdditiveExpression<span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">-</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span>MultiplicativeExpression<span class="token operator">&gt;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><p>2、可把普通数字当成乘法的一种特例：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token operator">&lt;</span>MultiplicativeExpression<span class="token operator">&gt;</span> <span class="token operator">:</span><span class="token operator">:</span><span class="token operator">=</span>
    <span class="token operator">&lt;</span>Number<span class="token operator">&gt;</span>
    <span class="token operator">|</span><span class="token operator">&lt;</span>MultiplicativeExpression<span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">*</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span>Number<span class="token operator">&gt;</span>
    <span class="token operator">|</span><span class="token operator">&lt;</span>MultiplicativeExpression<span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span>Number<span class="token operator">&gt;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><p>上面就是四则运算的定义。</p> <h2 id="三、词法分析-状态机"><a href="#三、词法分析-状态机" class="header-anchor">#</a> 三、词法分析：状态机</h2> <blockquote><p>词法分析：把字符流变成 token 流，有两种方案，一种是状态机，一种是正则表达式，它们是等效的。</p></blockquote> <h3 id="_3-1、实现状态机"><a href="#_3-1、实现状态机" class="header-anchor">#</a> 3.1、实现状态机</h3> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// 可能产生四种输入元素，其中只有两种 token，状态机的第一个状态就是根据第一个输入字符来判断进入了哪种状态</span>

<span class="token keyword">var</span> token <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">function</span> <span class="token function">start</span><span class="token punctuation">(</span><span class="token parameter">char</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">if</span><span class="token punctuation">(</span>char <span class="token operator">===</span> <span class="token string">'1'</span> <span class="token operator">||</span> char <span class="token operator">===</span> <span class="token string">'2'</span><span class="token operator">||</span> char <span class="token operator">===</span> <span class="token string">'3'</span>
        <span class="token operator">||</span> char <span class="token operator">===</span> <span class="token string">'4'</span><span class="token operator">||</span> char <span class="token operator">===</span> <span class="token string">'5'</span><span class="token operator">||</span> char <span class="token operator">===</span> <span class="token string">'6'</span><span class="token operator">||</span> char <span class="token operator">===</span> <span class="token string">'7'</span>
        <span class="token operator">||</span> char <span class="token operator">===</span> <span class="token string">'8'</span><span class="token operator">||</span> char <span class="token operator">===</span> <span class="token string">'9'</span><span class="token operator">||</span> char <span class="token operator">===</span> <span class="token string">'0'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        token<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>char<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token keyword">return</span> inNumber<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token keyword">if</span><span class="token punctuation">(</span>char <span class="token operator">===</span> <span class="token string">'+'</span> <span class="token operator">||</span> char <span class="token operator">===</span> <span class="token string">'-'</span> <span class="token operator">||</span> char <span class="token operator">===</span> <span class="token string">'*'</span> <span class="token operator">||</span> char <span class="token operator">===</span> <span class="token string">'/'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token function">emmitToken</span><span class="token punctuation">(</span>char<span class="token punctuation">,</span> char<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token keyword">return</span> start
    <span class="token punctuation">}</span>
    <span class="token keyword">if</span><span class="token punctuation">(</span>char <span class="token operator">===</span> <span class="token string">' '</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">return</span> start<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token keyword">if</span><span class="token punctuation">(</span>char <span class="token operator">===</span> <span class="token string">'\r'</span> <span class="token operator">||</span> char <span class="token operator">===</span> <span class="token string">'\n'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">return</span> start<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token keyword">function</span> <span class="token function">inNumber</span><span class="token punctuation">(</span><span class="token parameter">char</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span> char <span class="token operator">===</span> <span class="token string">'1'</span> <span class="token operator">||</span> char <span class="token operator">===</span> <span class="token string">'2'</span> <span class="token operator">||</span> char <span class="token operator">===</span> <span class="token string">'3'</span>
        <span class="token operator">||</span> char <span class="token operator">===</span> <span class="token string">'4'</span><span class="token operator">||</span> char <span class="token operator">===</span> <span class="token string">'5'</span> <span class="token operator">||</span> char <span class="token operator">===</span> <span class="token string">'6'</span> <span class="token operator">||</span> char <span class="token operator">===</span> <span class="token string">'7'</span>
        <span class="token operator">||</span> char <span class="token operator">===</span> <span class="token string">'8'</span> <span class="token operator">||</span> char <span class="token operator">===</span> <span class="token string">'9'</span> <span class="token operator">||</span> char <span class="token operator">===</span> <span class="token string">'0'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        token<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>char<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token keyword">return</span> inNumber<span class="token punctuation">;</span>
    <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
        <span class="token function">emmitToken</span><span class="token punctuation">(</span><span class="token string">&quot;Number&quot;</span><span class="token punctuation">,</span> token<span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">&quot;&quot;</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        token <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
        <span class="token comment">// put back char</span>
        <span class="token keyword">return</span> <span class="token function">start</span><span class="token punctuation">(</span>char<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token comment">// 用函数表示状态，用 if 表示状态的迁移关系，用 return 值表示下一个状态。</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br></div></div><h3 id="_3-2、运行状态机"><a href="#_3-2、运行状态机" class="header-anchor">#</a> 3.2、运行状态机</h3> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">emmitToken</span><span class="token punctuation">(</span><span class="token parameter">type<span class="token punctuation">,</span> value</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>value<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token keyword">var</span> input <span class="token operator">=</span> <span class="token string">&quot;1024 + 2 * 256&quot;</span>

<span class="token keyword">var</span> state <span class="token operator">=</span> start<span class="token punctuation">;</span>

<span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">var</span> c <span class="token keyword">of</span> input<span class="token punctuation">.</span><span class="token function">split</span><span class="token punctuation">(</span><span class="token string">''</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
    state <span class="token operator">=</span> <span class="token function">state</span><span class="token punctuation">(</span>c<span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token function">state</span><span class="token punctuation">(</span><span class="token function">Symbol</span><span class="token punctuation">(</span><span class="token string">'EOF'</span><span class="token punctuation">)</span><span class="token punctuation">)</span>

<span class="token comment">// 输出结果</span>
<span class="token number">1024</span>
<span class="token operator">+</span>
<span class="token number">2</span>
<span class="token operator">*</span>
<span class="token number">256</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br></div></div><h2 id="四、语法分析-ll"><a href="#四、语法分析-ll" class="header-anchor">#</a> 四、语法分析：LL</h2> <blockquote><p>LL 语法分析根据每一个产生式来写一个函数。</p></blockquote> <h3 id="_4-1、写好函数名"><a href="#_4-1、写好函数名" class="header-anchor">#</a> 4.1、写好函数名</h3> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">AdditiveExpression</span><span class="token punctuation">(</span> <span class="token punctuation">)</span><span class="token punctuation">{</span>

<span class="token punctuation">}</span>
<span class="token keyword">function</span> <span class="token function">MultiplicativeExpression</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>

<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><h3 id="_4-2、假设已经拿到-token"><a href="#_4-2、假设已经拿到-token" class="header-anchor">#</a> 4.2、假设已经拿到 token</h3> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> tokens <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
    type<span class="token operator">:</span><span class="token string">&quot;Number&quot;</span><span class="token punctuation">,</span>
    value<span class="token operator">:</span> <span class="token string">&quot;1024&quot;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
    type<span class="token operator">:</span><span class="token string">&quot;+&quot;</span><span class="token punctuation">,</span>
    value<span class="token operator">:</span> <span class="token string">&quot;+&quot;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
    type<span class="token operator">:</span><span class="token string">&quot;Number&quot;</span><span class="token punctuation">,</span>
    value<span class="token operator">:</span> <span class="token string">&quot;2&quot;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
    type<span class="token operator">:</span><span class="token string">&quot;*&quot;</span><span class="token punctuation">,</span>
    value<span class="token operator">:</span> <span class="token string">&quot;*&quot;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
    type<span class="token operator">:</span><span class="token string">&quot;Number&quot;</span><span class="token punctuation">,</span>
    value<span class="token operator">:</span> <span class="token string">&quot;256&quot;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
    type<span class="token operator">:</span><span class="token string">&quot;EOF&quot;</span>
<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br></div></div><h3 id="_4-3、additiveexpression处理"><a href="#_4-3、additiveexpression处理" class="header-anchor">#</a> 4.3、AdditiveExpression处理</h3> <p>1、三种情况</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token operator">&lt;</span>AdditiveExpression<span class="token operator">&gt;</span> <span class="token operator">:</span><span class="token operator">:</span><span class="token operator">=</span>
    <span class="token operator">&lt;</span>MultiplicativeExpression<span class="token operator">&gt;</span>
    <span class="token operator">|</span><span class="token operator">&lt;</span>AdditiveExpression<span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">+</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span>MultiplicativeExpression<span class="token operator">&gt;</span>
    <span class="token operator">|</span><span class="token operator">&lt;</span>AdditiveExpression<span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">-</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span>MultiplicativeExpression<span class="token operator">&gt;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><p>2、AdditiveExpression 的写法</p> <blockquote><p>AdditiveExpression 的写法是根传入的节点，利用产生式合成新的节点。</p></blockquote> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">AdditiveExpression</span><span class="token punctuation">(</span><span class="token parameter">source</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token keyword">if</span><span class="token punctuation">(</span>source<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>type <span class="token operator">===</span> <span class="token string">&quot;MultiplicativeExpression&quot;</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">let</span> node <span class="token operator">=</span> <span class="token punctuation">{</span>
            type<span class="token operator">:</span><span class="token string">&quot;AdditiveExpression&quot;</span><span class="token punctuation">,</span>
            children<span class="token operator">:</span><span class="token punctuation">[</span>source<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">]</span>
        <span class="token punctuation">}</span>
        source<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span> <span class="token operator">=</span> node<span class="token punctuation">;</span>
        <span class="token keyword">return</span> node<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token keyword">if</span><span class="token punctuation">(</span>source<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>type <span class="token operator">===</span> <span class="token string">&quot;AdditiveExpression&quot;</span> <span class="token operator">&amp;&amp;</span> source<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">.</span>type <span class="token operator">===</span> <span class="token string">&quot;+&quot;</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">let</span> node <span class="token operator">=</span> <span class="token punctuation">{</span>
            type<span class="token operator">:</span><span class="token string">&quot;AdditiveExpression&quot;</span><span class="token punctuation">,</span>
            operator<span class="token operator">:</span><span class="token string">&quot;+&quot;</span><span class="token punctuation">,</span>
            children<span class="token operator">:</span><span class="token punctuation">[</span>source<span class="token punctuation">.</span><span class="token function">shift</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span> source<span class="token punctuation">.</span><span class="token function">shift</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token function">MultiplicativeExpression</span><span class="token punctuation">(</span>source<span class="token punctuation">)</span><span class="token punctuation">]</span>
        <span class="token punctuation">}</span>
        source<span class="token punctuation">.</span><span class="token function">unshift</span><span class="token punctuation">(</span>node<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token keyword">if</span><span class="token punctuation">(</span>source<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>type <span class="token operator">===</span> <span class="token string">&quot;AdditiveExpression&quot;</span> <span class="token operator">&amp;&amp;</span> source<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">.</span>type <span class="token operator">===</span> <span class="token string">&quot;-&quot;</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">let</span> node <span class="token operator">=</span> <span class="token punctuation">{</span>
            type<span class="token operator">:</span><span class="token string">&quot;AdditiveExpression&quot;</span><span class="token punctuation">,</span>
            operator<span class="token operator">:</span><span class="token string">&quot;-&quot;</span><span class="token punctuation">,</span>
            children<span class="token operator">:</span><span class="token punctuation">[</span>source<span class="token punctuation">.</span><span class="token function">shift</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span> source<span class="token punctuation">.</span><span class="token function">shift</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token function">MultiplicativeExpression</span><span class="token punctuation">(</span>source<span class="token punctuation">)</span><span class="token punctuation">]</span>
        <span class="token punctuation">}</span>
        source<span class="token punctuation">.</span><span class="token function">unshift</span><span class="token punctuation">(</span>node<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br></div></div><h3 id="_4-4、函数-expression-处理"><a href="#_4-4、函数-expression-处理" class="header-anchor">#</a> 4.4、函数 Expression 处理</h3> <p>1、把解析好的 token 传给的顶层处理函数 Expression。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token function">Expression</span><span class="token punctuation">(</span>tokens<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p>2、如果 Expression 收到第一个 token，是个 Number，就需要对产生式的首项层层展开，根据所有可能性调用相应的处理函数，这个过程在编译原理中称为求 <code>closure</code>。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">Expression</span><span class="token punctuation">(</span><span class="token parameter">source</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token keyword">if</span><span class="token punctuation">(</span>source<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>type <span class="token operator">===</span> <span class="token string">&quot;AdditiveExpression&quot;</span> <span class="token operator">&amp;&amp;</span> source<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span> <span class="token operator">&amp;&amp;</span> source<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">.</span>type <span class="token operator">===</span> <span class="token string">&quot;EOF&quot;</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">let</span> node <span class="token operator">=</span> <span class="token punctuation">{</span>
            type<span class="token operator">:</span><span class="token string">&quot;Expression&quot;</span><span class="token punctuation">,</span>
            children<span class="token operator">:</span><span class="token punctuation">[</span>source<span class="token punctuation">.</span><span class="token function">shift</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span> source<span class="token punctuation">.</span><span class="token function">shift</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">]</span>
        <span class="token punctuation">}</span>
        source<span class="token punctuation">.</span><span class="token function">unshift</span><span class="token punctuation">(</span>node<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token keyword">return</span> node<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token function">AdditiveExpression</span><span class="token punctuation">(</span>source<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">return</span> <span class="token function">Expression</span><span class="token punctuation">(</span>source<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">function</span> <span class="token function">AdditiveExpression</span><span class="token punctuation">(</span><span class="token parameter">source</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token keyword">if</span><span class="token punctuation">(</span>source<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>type <span class="token operator">===</span> <span class="token string">&quot;MultiplicativeExpression&quot;</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">let</span> node <span class="token operator">=</span> <span class="token punctuation">{</span>
            type<span class="token operator">:</span><span class="token string">&quot;AdditiveExpression&quot;</span><span class="token punctuation">,</span>
            children<span class="token operator">:</span><span class="token punctuation">[</span>source<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">]</span>
        <span class="token punctuation">}</span>
        source<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span> <span class="token operator">=</span> node<span class="token punctuation">;</span>
        <span class="token keyword">return</span> <span class="token function">AdditiveExpression</span><span class="token punctuation">(</span>source<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token keyword">if</span><span class="token punctuation">(</span>source<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>type <span class="token operator">===</span> <span class="token string">&quot;AdditiveExpression&quot;</span> <span class="token operator">&amp;&amp;</span> source<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span> <span class="token operator">&amp;&amp;</span> source<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">.</span>type <span class="token operator">===</span> <span class="token string">&quot;+&quot;</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">let</span> node <span class="token operator">=</span> <span class="token punctuation">{</span>
            type<span class="token operator">:</span><span class="token string">&quot;AdditiveExpression&quot;</span><span class="token punctuation">,</span>
            operator<span class="token operator">:</span><span class="token string">&quot;+&quot;</span><span class="token punctuation">,</span>
            children<span class="token operator">:</span><span class="token punctuation">[</span><span class="token punctuation">]</span>
        <span class="token punctuation">}</span>
        node<span class="token punctuation">.</span>children<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>source<span class="token punctuation">.</span><span class="token function">shift</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        node<span class="token punctuation">.</span>children<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>source<span class="token punctuation">.</span><span class="token function">shift</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token function">MultiplicativeExpression</span><span class="token punctuation">(</span>source<span class="token punctuation">)</span><span class="token punctuation">;</span>
        node<span class="token punctuation">.</span>children<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>source<span class="token punctuation">.</span><span class="token function">shift</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        source<span class="token punctuation">.</span><span class="token function">unshift</span><span class="token punctuation">(</span>node<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token keyword">return</span> <span class="token function">AdditiveExpression</span><span class="token punctuation">(</span>source<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token keyword">if</span><span class="token punctuation">(</span>source<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>type <span class="token operator">===</span> <span class="token string">&quot;AdditiveExpression&quot;</span> <span class="token operator">&amp;&amp;</span> source<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span> <span class="token operator">&amp;&amp;</span> source<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">.</span>type <span class="token operator">===</span> <span class="token string">&quot;-&quot;</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">let</span> node <span class="token operator">=</span> <span class="token punctuation">{</span>
            type<span class="token operator">:</span><span class="token string">&quot;AdditiveExpression&quot;</span><span class="token punctuation">,</span>
            operator<span class="token operator">:</span><span class="token string">&quot;-&quot;</span><span class="token punctuation">,</span>
            children<span class="token operator">:</span><span class="token punctuation">[</span><span class="token punctuation">]</span>
        <span class="token punctuation">}</span>
        node<span class="token punctuation">.</span>children<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>source<span class="token punctuation">.</span><span class="token function">shift</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        node<span class="token punctuation">.</span>children<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>source<span class="token punctuation">.</span><span class="token function">shift</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token function">MultiplicativeExpression</span><span class="token punctuation">(</span>source<span class="token punctuation">)</span><span class="token punctuation">;</span>
        node<span class="token punctuation">.</span>children<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>source<span class="token punctuation">.</span><span class="token function">shift</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        source<span class="token punctuation">.</span><span class="token function">unshift</span><span class="token punctuation">(</span>node<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token keyword">return</span> <span class="token function">AdditiveExpression</span><span class="token punctuation">(</span>source<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token keyword">if</span><span class="token punctuation">(</span>source<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>type <span class="token operator">===</span> <span class="token string">&quot;AdditiveExpression&quot;</span><span class="token punctuation">)</span>
        <span class="token keyword">return</span> source<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
    <span class="token function">MultiplicativeExpression</span><span class="token punctuation">(</span>source<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">return</span> <span class="token function">AdditiveExpression</span><span class="token punctuation">(</span>source<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">function</span> <span class="token function">MultiplicativeExpression</span><span class="token punctuation">(</span><span class="token parameter">source</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token keyword">if</span><span class="token punctuation">(</span>source<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>type <span class="token operator">===</span> <span class="token string">&quot;Number&quot;</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">let</span> node <span class="token operator">=</span> <span class="token punctuation">{</span>
            type<span class="token operator">:</span><span class="token string">&quot;MultiplicativeExpression&quot;</span><span class="token punctuation">,</span>
            children<span class="token operator">:</span><span class="token punctuation">[</span>source<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">]</span>
        <span class="token punctuation">}</span>
        source<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span> <span class="token operator">=</span> node<span class="token punctuation">;</span>
        <span class="token keyword">return</span> <span class="token function">MultiplicativeExpression</span><span class="token punctuation">(</span>source<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token keyword">if</span><span class="token punctuation">(</span>source<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>type <span class="token operator">===</span> <span class="token string">&quot;MultiplicativeExpression&quot;</span> <span class="token operator">&amp;&amp;</span> source<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span> <span class="token operator">&amp;&amp;</span> source<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">.</span>type <span class="token operator">===</span> <span class="token string">&quot;*&quot;</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">let</span> node <span class="token operator">=</span> <span class="token punctuation">{</span>
            type<span class="token operator">:</span><span class="token string">&quot;MultiplicativeExpression&quot;</span><span class="token punctuation">,</span>
            operator<span class="token operator">:</span><span class="token string">&quot;*&quot;</span><span class="token punctuation">,</span>
            children<span class="token operator">:</span><span class="token punctuation">[</span><span class="token punctuation">]</span>
        <span class="token punctuation">}</span>
        node<span class="token punctuation">.</span>children<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>source<span class="token punctuation">.</span><span class="token function">shift</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        node<span class="token punctuation">.</span>children<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>source<span class="token punctuation">.</span><span class="token function">shift</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        node<span class="token punctuation">.</span>children<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>source<span class="token punctuation">.</span><span class="token function">shift</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        source<span class="token punctuation">.</span><span class="token function">unshift</span><span class="token punctuation">(</span>node<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token keyword">return</span> <span class="token function">MultiplicativeExpression</span><span class="token punctuation">(</span>source<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token keyword">if</span><span class="token punctuation">(</span>source<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>type <span class="token operator">===</span> <span class="token string">&quot;MultiplicativeExpression&quot;</span><span class="token operator">&amp;&amp;</span> source<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span> <span class="token operator">&amp;&amp;</span> source<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">.</span>type <span class="token operator">===</span> <span class="token string">&quot;/&quot;</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">let</span> node <span class="token operator">=</span> <span class="token punctuation">{</span>
            type<span class="token operator">:</span><span class="token string">&quot;MultiplicativeExpression&quot;</span><span class="token punctuation">,</span>
            operator<span class="token operator">:</span><span class="token string">&quot;/&quot;</span><span class="token punctuation">,</span>
            children<span class="token operator">:</span><span class="token punctuation">[</span><span class="token punctuation">]</span>
        <span class="token punctuation">}</span>
        node<span class="token punctuation">.</span>children<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>source<span class="token punctuation">.</span><span class="token function">shift</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        node<span class="token punctuation">.</span>children<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>source<span class="token punctuation">.</span><span class="token function">shift</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        node<span class="token punctuation">.</span>children<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>source<span class="token punctuation">.</span><span class="token function">shift</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        source<span class="token punctuation">.</span><span class="token function">unshift</span><span class="token punctuation">(</span>node<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token keyword">return</span> <span class="token function">MultiplicativeExpression</span><span class="token punctuation">(</span>source<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token keyword">if</span><span class="token punctuation">(</span>source<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>type <span class="token operator">===</span> <span class="token string">&quot;MultiplicativeExpression&quot;</span><span class="token punctuation">)</span>
        <span class="token keyword">return</span> source<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">;</span>

    <span class="token keyword">return</span> <span class="token function">MultiplicativeExpression</span><span class="token punctuation">(</span>source<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>

<span class="token keyword">var</span> source <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
    type<span class="token operator">:</span><span class="token string">&quot;Number&quot;</span><span class="token punctuation">,</span>
    value<span class="token operator">:</span> <span class="token string">&quot;3&quot;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
    type<span class="token operator">:</span><span class="token string">&quot;*&quot;</span><span class="token punctuation">,</span>
    value<span class="token operator">:</span> <span class="token string">&quot;*&quot;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
    type<span class="token operator">:</span><span class="token string">&quot;Number&quot;</span><span class="token punctuation">,</span>
    value<span class="token operator">:</span> <span class="token string">&quot;300&quot;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
    type<span class="token operator">:</span><span class="token string">&quot;+&quot;</span><span class="token punctuation">,</span>
    value<span class="token operator">:</span> <span class="token string">&quot;+&quot;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
    type<span class="token operator">:</span><span class="token string">&quot;Number&quot;</span><span class="token punctuation">,</span>
    value<span class="token operator">:</span> <span class="token string">&quot;2&quot;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
    type<span class="token operator">:</span><span class="token string">&quot;*&quot;</span><span class="token punctuation">,</span>
    value<span class="token operator">:</span> <span class="token string">&quot;*&quot;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
    type<span class="token operator">:</span><span class="token string">&quot;Number&quot;</span><span class="token punctuation">,</span>
    value<span class="token operator">:</span> <span class="token string">&quot;256&quot;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
    type<span class="token operator">:</span><span class="token string">&quot;EOF&quot;</span>
<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> ast <span class="token operator">=</span> <span class="token function">Expression</span><span class="token punctuation">(</span>source<span class="token punctuation">)</span><span class="token punctuation">;</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>ast<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// 输出结果 children: Array(1) children: Array(3)还可以继续展开。。。</span>
<span class="token punctuation">{</span>
    type<span class="token operator">:</span> <span class="token string">&quot;Expression&quot;</span><span class="token punctuation">,</span>
    children<span class="token operator">:</span> <span class="token punctuation">[</span>
        <span class="token punctuation">{</span>
            type<span class="token operator">:</span> <span class="token string">&quot;AdditiveExpression&quot;</span><span class="token punctuation">,</span>
            operator<span class="token operator">:</span> <span class="token string">&quot;+&quot;</span><span class="token punctuation">,</span>
            children<span class="token operator">:</span> <span class="token punctuation">[</span>
                <span class="token punctuation">{</span>
                    type<span class="token operator">:</span> <span class="token string">&quot;AdditiveExpression&quot;</span><span class="token punctuation">,</span>
                    children<span class="token operator">:</span> <span class="token function">Array</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span>
                <span class="token punctuation">}</span><span class="token punctuation">,</span>
                <span class="token punctuation">{</span>
                    type<span class="token operator">:</span> <span class="token string">&quot;+&quot;</span><span class="token punctuation">,</span>
                    value<span class="token operator">:</span> <span class="token string">&quot;+&quot;</span>
                <span class="token punctuation">}</span><span class="token punctuation">,</span>
                <span class="token punctuation">{</span>
                    type<span class="token operator">:</span> <span class="token string">&quot;MultiplicativeExpression&quot;</span><span class="token punctuation">,</span>
                    operator<span class="token operator">:</span> <span class="token string">&quot;*&quot;</span><span class="token punctuation">,</span>
                    children<span class="token operator">:</span> <span class="token function">Array</span><span class="token punctuation">(</span><span class="token number">3</span><span class="token punctuation">)</span>
                <span class="token punctuation">}</span>
            <span class="token punctuation">]</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">{</span>
            type<span class="token operator">:</span> <span class="token string">&quot;EOF&quot;</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">]</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br><span class="line-number">53</span><br><span class="line-number">54</span><br><span class="line-number">55</span><br><span class="line-number">56</span><br><span class="line-number">57</span><br><span class="line-number">58</span><br><span class="line-number">59</span><br><span class="line-number">60</span><br><span class="line-number">61</span><br><span class="line-number">62</span><br><span class="line-number">63</span><br><span class="line-number">64</span><br><span class="line-number">65</span><br><span class="line-number">66</span><br><span class="line-number">67</span><br><span class="line-number">68</span><br><span class="line-number">69</span><br><span class="line-number">70</span><br><span class="line-number">71</span><br><span class="line-number">72</span><br><span class="line-number">73</span><br><span class="line-number">74</span><br><span class="line-number">75</span><br><span class="line-number">76</span><br><span class="line-number">77</span><br><span class="line-number">78</span><br><span class="line-number">79</span><br><span class="line-number">80</span><br><span class="line-number">81</span><br><span class="line-number">82</span><br><span class="line-number">83</span><br><span class="line-number">84</span><br><span class="line-number">85</span><br><span class="line-number">86</span><br><span class="line-number">87</span><br><span class="line-number">88</span><br><span class="line-number">89</span><br><span class="line-number">90</span><br><span class="line-number">91</span><br><span class="line-number">92</span><br><span class="line-number">93</span><br><span class="line-number">94</span><br><span class="line-number">95</span><br><span class="line-number">96</span><br><span class="line-number">97</span><br><span class="line-number">98</span><br><span class="line-number">99</span><br><span class="line-number">100</span><br><span class="line-number">101</span><br><span class="line-number">102</span><br><span class="line-number">103</span><br><span class="line-number">104</span><br><span class="line-number">105</span><br><span class="line-number">106</span><br><span class="line-number">107</span><br><span class="line-number">108</span><br><span class="line-number">109</span><br><span class="line-number">110</span><br><span class="line-number">111</span><br><span class="line-number">112</span><br><span class="line-number">113</span><br><span class="line-number">114</span><br><span class="line-number">115</span><br><span class="line-number">116</span><br><span class="line-number">117</span><br><span class="line-number">118</span><br><span class="line-number">119</span><br><span class="line-number">120</span><br><span class="line-number">121</span><br><span class="line-number">122</span><br><span class="line-number">123</span><br><span class="line-number">124</span><br><span class="line-number">125</span><br><span class="line-number">126</span><br><span class="line-number">127</span><br><span class="line-number">128</span><br><span class="line-number">129</span><br><span class="line-number">130</span><br><span class="line-number">131</span><br><span class="line-number">132</span><br><span class="line-number">133</span><br><span class="line-number">134</span><br><span class="line-number">135</span><br><span class="line-number">136</span><br><span class="line-number">137</span><br><span class="line-number">138</span><br><span class="line-number">139</span><br><span class="line-number">140</span><br><span class="line-number">141</span><br><span class="line-number">142</span><br><span class="line-number">143</span><br><span class="line-number">144</span><br><span class="line-number">145</span><br><span class="line-number">146</span><br></div></div><h2 id="五、解释执行"><a href="#五、解释执行" class="header-anchor">#</a> 五、解释执行</h2> <blockquote><p>得到了 AST 之后，只需要对这个树做遍历操作执行即可。</p></blockquote> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// 根据不同的节点类型和其它信息，用 if 分别处理即可：</span>
<span class="token keyword">function</span> <span class="token function">evaluate</span><span class="token punctuation">(</span><span class="token parameter">node</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">if</span><span class="token punctuation">(</span>node<span class="token punctuation">.</span>type <span class="token operator">===</span> <span class="token string">&quot;Expression&quot;</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">return</span> <span class="token function">evaluate</span><span class="token punctuation">(</span>node<span class="token punctuation">.</span>children<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
    <span class="token keyword">if</span><span class="token punctuation">(</span>node<span class="token punctuation">.</span>type <span class="token operator">===</span> <span class="token string">&quot;AdditiveExpression&quot;</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">if</span><span class="token punctuation">(</span>node<span class="token punctuation">.</span>operator <span class="token operator">===</span> <span class="token string">'-'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token keyword">return</span> <span class="token function">evaluate</span><span class="token punctuation">(</span>node<span class="token punctuation">.</span>children<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token operator">-</span> <span class="token function">evaluate</span><span class="token punctuation">(</span>node<span class="token punctuation">.</span>children<span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
        <span class="token keyword">if</span><span class="token punctuation">(</span>node<span class="token punctuation">.</span>operator <span class="token operator">===</span> <span class="token string">'+'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token keyword">return</span> <span class="token function">evaluate</span><span class="token punctuation">(</span>node<span class="token punctuation">.</span>children<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token function">evaluate</span><span class="token punctuation">(</span>node<span class="token punctuation">.</span>children<span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
        <span class="token keyword">return</span> <span class="token function">evaluate</span><span class="token punctuation">(</span>node<span class="token punctuation">.</span>children<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
    <span class="token keyword">if</span><span class="token punctuation">(</span>node<span class="token punctuation">.</span>type <span class="token operator">===</span> <span class="token string">&quot;MultiplicativeExpression&quot;</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">if</span><span class="token punctuation">(</span>node<span class="token punctuation">.</span>operator <span class="token operator">===</span> <span class="token string">'*'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token keyword">return</span> <span class="token function">evaluate</span><span class="token punctuation">(</span>node<span class="token punctuation">.</span>children<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token operator">*</span> <span class="token function">evaluate</span><span class="token punctuation">(</span>node<span class="token punctuation">.</span>children<span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
        <span class="token keyword">if</span><span class="token punctuation">(</span>node<span class="token punctuation">.</span>operator <span class="token operator">===</span> <span class="token string">'/'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token keyword">return</span> <span class="token function">evaluate</span><span class="token punctuation">(</span>node<span class="token punctuation">.</span>children<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token operator">/</span> <span class="token function">evaluate</span><span class="token punctuation">(</span>node<span class="token punctuation">.</span>children<span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
        <span class="token keyword">return</span> <span class="token function">evaluate</span><span class="token punctuation">(</span>node<span class="token punctuation">.</span>children<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
    <span class="token keyword">if</span><span class="token punctuation">(</span>node<span class="token punctuation">.</span>type <span class="token operator">===</span> <span class="token string">&quot;Number&quot;</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">return</span> <span class="token function">Number</span><span class="token punctuation">(</span>node<span class="token punctuation">.</span>value<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br></div></div></div></div> <div class="page-edit"><div class="tags"><a href="/blogs/tags/?tag=javaScript" title="标签">#javaScript</a><a href="/blogs/tags/?tag=%E7%BC%96%E8%AF%91%E5%8E%9F%E7%90%86" title="标签">#编译原理</a></div> <div class="last-updated"><span class="prefix">最近更新时间：</span> <span class="time">2021/02/05 19:00:38</span></div></div> <div class="page-nav-wapper"><div class="page-nav-centre-wrap"><a href="/blogs/column-notes/relearn-frontend/157f34079fad3/" class="page-nav-centre page-nav-centre-prev"><div class="tooltip">JavaScript的词法（二十七）</div></a> <a href="/blogs/column-notes/relearn-frontend/568a66cc101ec/" class="page-nav-centre page-nav-centre-next"><div class="tooltip">JavaScript中要不要加分号？（二十九）</div></a></div> <div class="page-nav"><p class="inner"><span class="prev">
        ←
        <a href="/blogs/column-notes/relearn-frontend/157f34079fad3/" class="prev">JavaScript的词法（二十七）</a></span> <span class="next"><a href="/blogs/column-notes/relearn-frontend/568a66cc101ec/">JavaScript中要不要加分号？（二十九）</a>→
      </span></p></div></div></div> <div class="theme-vdoing-wrapper article-list bg-style-2"><div class="article-title"><a href="/blogs/archives/" class="fa fa-pencil-alt">
      最近更新
    </a></div> <div class="article-wrapper"><dl><dd>01</dd> <dt><div><a href="/blogs/web/docs/docschina/"><div>印记中文</div></a></div> <div class="date"><span>2021/03/02 09:50:11</span></div></dt></dl><dl><dd>02</dd> <dt><div><a href="/blogs/resource-tools/8396c1c08f1b6/"><div>一些前端开发的干货</div></a></div> <div class="date"><span>2021/02/28 02:29:20</span></div></dt></dl><dl><dd>03</dd> <dt><div><a href="/blogs/resource-tools/3b17bb5dd2c98/"><div>全球开放电子图书馆及免费资源</div></a></div> <div class="date"><span>2021/02/23 00:12:54</span></div></dt></dl> <div class="more-box"><a href="/blogs/archives/" class="more"><i class="fas fa-angle-double-right"></i>前往更多 ...
      </a></div></div></div> <div class="comments-wrapper" style="display:none;"><!----></div></main></div> <div class="footer-wrapper" data-v-ae53833e data-v-ae53833e><span class="footer-reco-theme" data-v-ae53833e><i class="iconfont reco-theme" data-v-ae53833e></i> <a target="blank" href="https://vuepress-theme-reco.recoluan.com" data-v-ae53833e>vuepress-theme-reco@1.6.1</a> <a target="blank" href="https://doc.xugaoyi.com/" class="vdoing ml5" data-v-ae53833e>vuepress-theme-vdoing@1.7.2</a></span> <!----> <span class="footer-copyright" data-v-ae53833e><i class="iconfont reco-copyright" data-v-ae53833e></i> <a data-v-ae53833e><span data-v-ae53833e>凯小默</span> <span class="ml5" data-v-ae53833e>
          2019 - 2021
        </span></a></span> <span class="footer-view-site" data-v-ae53833e><i class="iconfont reco-eye" data-v-ae53833e></i> <span id="busuanzi_container_site_uv" data-v-ae53833e>
        访客数：<span id="busuanzi_value_site_uv" class="num" data-v-ae53833e>-</span></span> <span id="busuanzi_container_site_pv" class="ml5" data-v-ae53833e>
        访问量：<span id="busuanzi_value_site_pv" class="num" data-v-ae53833e>-</span></span></span> <!----></div> <!----></div></div><div class="global-ui"><div class="back-to-ceiling" style="right:1rem;bottom:6rem;width:2.5rem;height:2.5rem;border-radius:.25rem;line-height:2.5rem;display:none;" data-v-c6073ba8 data-v-c6073ba8><svg t="1574745035067" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5404" class="icon" data-v-c6073ba8><path d="M526.60727968 10.90185116a27.675 27.675 0 0 0-29.21455937 0c-131.36607665 82.28402758-218.69155461 228.01873535-218.69155402 394.07834331a462.20625001 462.20625001 0 0 0 5.36959153 69.94390903c1.00431239 6.55289093-0.34802892 13.13561351-3.76865779 18.80351572-32.63518765 54.11355614-51.75690182 118.55860487-51.7569018 187.94566865a371.06718723 371.06718723 0 0 0 11.50484808 91.98906777c6.53300375 25.50556257 41.68394495 28.14064038 52.69160883 4.22606766 17.37162448-37.73630017 42.14135425-72.50938081 72.80769204-103.21549295 2.18761121 3.04276886 4.15646224 6.24463696 6.40373557 9.22774369a1871.4375 1871.4375 0 0 0 140.04691725 5.34970492 1866.36093723 1866.36093723 0 0 0 140.04691723-5.34970492c2.24727335-2.98310674 4.21612437-6.18497483 6.3937923-9.2178004 30.66633723 30.70611158 55.4360664 65.4791928 72.80769147 103.21549355 11.00766384 23.91457269 46.15860503 21.27949489 52.69160879-4.22606768a371.15156223 371.15156223 0 0 0 11.514792-91.99901164c0-69.36717486-19.13165746-133.82216804-51.75690182-187.92578088-3.42062944-5.66790279-4.76302748-12.26056868-3.76865837-18.80351632a462.20625001 462.20625001 0 0 0 5.36959269-69.943909c-0.00994388-166.08943902-87.32547796-311.81420293-218.6915546-394.09823051zM605.93803103 357.87693858a93.93749974 93.93749974 0 1 1-187.89594924 6.1e-7 93.93749974 93.93749974 0 0 1 187.89594924-6.1e-7z" p-id="5405" data-v-c6073ba8></path><path d="M429.50777625 765.63860547C429.50777625 803.39355007 466.44236686 1000.39046097 512.00932183 1000.39046097c45.56695499 0 82.4922232-197.00623328 82.5015456-234.7518555 0-37.75494459-36.9345906-68.35043303-82.4922232-68.34111062-45.57627738-0.00932239-82.52019037 30.59548842-82.51086798 68.34111062z" p-id="5406" data-v-c6073ba8></path></svg></div><!----><div></div><APlayer audio="" fixed="true" mini="true" theme="#3eaf7c" loop="loop" order="random" preload="auto" volume="1" mutex="true" lrc-type="0" list-folded="true" list-max-height="250" storage-name="vuepress-plugin-meting" id="aplayer-fixed"></APlayer></div></div>
    <script src="/blogs/assets/js/app.c4a9ac0d.js" defer></script><script src="/blogs/assets/js/2.a11320bc.js" defer></script><script src="/blogs/assets/js/233.9556cd61.js" defer></script><script src="/blogs/assets/js/6.b06f02ee.js" defer></script>
  </body>
</html>
